<template>
  <div>
    <breadcrumb class="breadcrumb-container"></breadcrumb>
    <el-row>
      <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
        <el-card>
          <b class="total"></b>
          <div>
            <p>佣金总收入</p>
            <h1>{{ nav.commission_count }}元</h1>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
        <el-card>
          <b class="money-1"></b>
          <div>
            <p>已提现金额</p>
            <h1>{{ nav.count }}元</h1>
          </div>
        </el-card>
      </el-col>
      <el-col :xl="6" :lg="8" :md="12" :sm="24" :xs="24">
        <el-card>
          <b class="money-2"></b>
          <div>
            <p>未提现金额 <el-button size="small" type="text" @click="handleClickMoney">提现</el-button></p>
            <h1>{{ nav.money }}元</h1>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row>
      <el-form :model="searchForm" inline size="small">
        <el-form-item label="">
          <el-button type="primary" size="small" icon="el-icon-download" @click="handleDownload">批量导出</el-button>
        </el-form-item>
        <el-form-item label="提现状态">
          <el-select v-model="searchForm.option" placeholder="全部" clearable>
            <el-option v-for="(item,index) in state" :key="index" :value="item.status_id" :label="item.status_name">{{ item.status_name }}</el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="提现时间">
          <el-date-picker type="date" placeholder="开始时间" v-model="searchForm.start" clearable value-format="yyyy-MM-dd"></el-date-picker>
          <span>-</span>
          <el-date-picker type="date" placeholder="结束时间" v-model="searchForm.stop" clearable value-format="yyyy-MM-dd"></el-date-picker>
        </el-form-item>
        <el-button type="success" size="small" icon="el-icon-search" @click="search">查询</el-button>
      </el-form>
    </el-row>
    <el-row>
      <el-table size="small" :data="date"  @selection-change="handleSelectionChange" :header-cell-style="{background:'#f2f2f2'}">
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column align="center" label="提现时间" prop="created_at"></el-table-column>
        <el-table-column align="center" label="户名" prop="pay_name"></el-table-column>
        <el-table-column align="center" label="卡号" prop="account"></el-table-column>
        <el-table-column align="center" label="开户行" prop="deposit_bank"></el-table-column>
        <el-table-column align="center" label="支行名称" prop="sub_bank"></el-table-column>
        <el-table-column align="center" label="提现金额" prop="money"></el-table-column>
        <el-table-column align="center" label="提现状态">
          <template slot-scope="scope">
            <span :class="scope.row.status === '已申请' ? 'tip' : scope.row.status === '打款失败' ? 'err' : ''">{{ scope.row.status }}</span>
          </template>
        </el-table-column>
      </el-table>
       <el-pagination :total="page.total" :current-page.sync="page.current" layout="total, prev, pager, next, jumper"  class="fr mt20" @current-change="handleCurrentChange" :page-size="page.pageSize"></el-pagination>
    </el-row>
    <el-dialog title="提现申请" :visible.sync="dialog" width="430px" @open="getDialog">
      <el-form :model="dailogItem" size="small" label-width="90px" class="mt20">
        <el-form-item label="户名：">
          <span class="fz12">{{ dailogItem.bank_accout_name }}</span>
        </el-form-item>
        <el-form-item label="卡号：">
          <span class="fz12">{{ dailogItem.bank_account_no }}</span>
        </el-form-item>
        <el-form-item label="开户行：">
          <span class="fz12">{{ dailogItem.deposit_bank }}</span>
        </el-form-item>
        <el-form-item label="支行名称：">
          <span class="fz12">{{ dailogItem.sub_bank }}</span>
        </el-form-item>
        <el-form-item label="提现金额：￥">
          <el-input class="w200" :placeholder="dailogItem.rate" v-model="dialogVal"></el-input>
          <el-button type="primary" size="small" @click="()=>{this.dialogVal = this.dailogItem.rate}">全部提现</el-button>
          <p>有{{ dailogItem.date_rate }}元不可提现</p>
        </el-form-item>
        <p class="err">当前平台佣金为月结算，您可随时提现，每月25-30号为打款日，请耐心等待到账。</p>
      </el-form>
      <div slot="footer">
        <el-button type="primary" size="small" @click="subRate">确定提现</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Breadcrumb from '@/components/Breadcrumb'
import { accountInit } from '@/api/setting'
import { withdrawInit, withdrawSearch, withdrawPage, DialogList, subRate } from '@/api/commission'

export default {
  name: 'withdraw',
  components: {
    Breadcrumb
  },
  data() {
    return {
      dialog: false,
      mes: '',
      date: [],
      list: [],
      state: [],
      searchForm: {
        option: '',
        start: '',
        stop: ''
      },
      nav: {
        commission_count: '',
        count: '',
        money: ''
      },
      page: {
        total: 0,
        pageSize: 1,
        current: 1
      },
      dailogItem: {
        bank_account_no: '',
        bank_accout_name: '',
        date_rate: 0,
        deposit_bank: '',
        rate: '',
        sub_bank: ''
      },
      dialogVal: ''
    }
  },
  methods: {
    init() {
      withdrawInit().then(response => {
        this.date = response.data.result.cashs.data
        this.state = response.data.result.status_name
        this.nav.commission_count = response.data.result.commission_count
        this.nav.count = response.data.result.count
        this.nav.money = response.data.result.money
        this.page.total = response.data.result.cashs.total
        this.page.pageSize = response.data.result.cashs.per_page
        this.page.current = response.data.result.cashs.current_page
      })
    },
    handleSelectionChange(v) {
      this.list = v
    },
    handleDownload() {
      require.ensure([], () => {
        const { export_json_to_excel } = require('@/vendor/Export2Excel')
        const tHeader = ['提现时间', '户名', '卡号', '开户行', '支行名称', '提现金额', '提现状态'] // excel 表格头
        const filterVal = ['created_at', 'pay_name', 'account', 'deposit_bank', 'sub_bank', 'money', 'status'] // excel key值
        const list = this.list
        const data = this.formatJson(filterVal, list) // 自行洗数据 按序排序的一个array数组
        export_json_to_excel(tHeader, data, '提现详情')
      })
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v => filterVal.map(j => v[j]))
    },
    handleCurrentChange(v) {
      withdrawPage(this.searchForm, v).then(response => {
        this.date = response.data.result.cashs.data
        this.page.total = response.data.result.cashs.total
      })
    },
    search() {
      withdrawSearch(this.searchForm).then(response => {
        this.date = response.data.result.cashs.data
        this.page.total = response.data.result.cashs.total
        this.page.current = response.data.result.cashs.current_page
      })
    },
    getDialog() {
      DialogList().then(response => {
        this.dailogItem.bank_accout_name = response.data.result.bank_accout_name
        this.dailogItem.bank_account_no = response.data.result.bank_account_no
        this.dailogItem.date_rate = response.data.result.date_rate
        this.dailogItem.rate = response.data.result.rate
        this.dailogItem.sub_bank = response.data.result.sub_bank
        this.dailogItem.deposit_bank = response.data.result.deposit_bank
      })
    },
    subRate() {
      subRate(this.dialogVal).then(response => {
        if (response.data.errorCode === 0) {
          this.$message.success(response.data.errorMsg)
          this.init()
          this.dialog = false
        } else {
          this.$message.error(response.data.errorMsg)
        }
      })
    },
    handleClickMoney() {
      accountInit().then(res => {
        if (res.data.errorCode === 0) {
          if (res.data.result.bank_check_status === 0) {
            this.$confirm('账号信息不完善，请尽快完善账号信息！', '警告', {
              confirmButtonText: '前往完善',
              cancelButtonText: '暂不完善',
              type: 'warning'
            }).then(() => {
              this.$router.push({ name: 'account' })
            }).catch(() => {
              return false
            })
          } else {
            this.dialog = true
          }
        } else {
          this.$message.error(res.data.errorMsg)
        }
      })
    }
  },
  created() {
    this.init()
  }
}
</script>

<style lang="scss" scoped>
  .el-row{
    margin-bottom: 20px;
    .el-col{
      .el-card{
        width: 90%;
        b{
          display: inline-block;
          width: 70px;
          height: 70px;
          margin-right: 10px;
          vertical-align: middle;
        }
        .total{
          background: url('../../assets/img/icon-1.png') center no-repeat;
        }
        .money-1{
          background: url('../../assets/img/icon-2.png') center no-repeat;
        }
        .money-2{
          background: url('../../assets/img/icon-3.png') center no-repeat;
        }
        h1{
          font-weight: 400;
          margin: 0;
        }
        div{
          display: inline-block;
          vertical-align: middle;
          line-height: 1.4;
        }
        /deep/ .el-card__body{
          padding: 10px 20px;
        }
        p{
          margin: 0;
          .el-button{
            padding: 5px 15px;
            border: 1px solid #56c881;
            color: #56c881;
          }
        }
      }
    }
  }
</style>
